<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小明的QQ空间</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            qblue: '#2D7DD2',      // QQ蓝主色
            qlightblue: '#E8F3FF', // 浅蓝色背景
            qgray: '#F5F6F7',      // 浅灰色
            qdarkgray: '#8A8F98',  // 深灰色文字
            qred: '#FF6B6B',       // 红色（点赞/提醒）
          },
          fontFamily: {
            qq: ['"Microsoft YaHei"', 'Arial', 'sans-serif'],
          },
          boxShadow: {
            'qq': '0 1px 2px rgba(0, 0, 0, 0.1)',
            'qq-hover': '0 3px 8px rgba(0, 0, 0, 0.15)',
          }
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .qq-border {
        border: 1px solid #E1E5EB;
      }
      .qq-radius {
        border-radius: 4px;
      }
      .qq-transition {
        transition: all 0.3s ease;
      }
    }
  </style>
  
  <style>
    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #C9CDD4;
      border-radius: 3px;
    }
    ::-webkit-scrollbar-track {
      background-color: #F5F6F7;
    }
    
    /* 动态发布框聚焦效果 */
    .status-input:focus {
      box-shadow: 0 0 0 2px rgba(45, 125, 210, 0.2);
    }
    
    /* 导航栏滚动效果 */
    .nav-scroll {
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
  </style>
</head>
<body class="font-qq bg-qgray text-gray-800 min-h-screen">
  <!-- 顶部导航栏 -->
  <header class="nav-scroll bg-white fixed top-0 left-0 right-0 z-50 qq-border">
    <div class="container mx-auto px-4 py-2 flex items-center justify-between">
      <!-- 左侧Logo和导航 -->
      <div class="flex items-center space-x-8">
        <div class="flex items-center">
          <i class="fa fa-qq text-3xl text-qblue mr-2"></i>
          <span class="text-xl font-bold hidden sm:inline-block">QQ空间</span>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a href="#" class="text-qblue font-medium border-b-2 border-qblue py-1">主页</a>
          <a href="#" class="text-gray-600 hover:text-qblue transition-colors py-1">相册</a>
          <a href="#" class="text-gray-600 hover:text-qblue transition-colors py-1">说说</a>
          <a href="#" class="text-gray-600 hover:text-qblue transition-colors py-1">留言板</a>
        </nav>
      </div>
      
      <!-- 右侧搜索和用户信息 -->
      <div class="flex items-center space-x-4">
        <div class="relative hidden sm:block">
          <input type="text" placeholder="搜索好友、动态" class="pl-10 pr-4 py-1.5 rounded-full text-sm border border-gray-300 focus:outline-none focus:border-qblue w-48 lg:w-64">
          <i class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
        </div>
        <div class="relative">
          <button class="w-9 h-9 rounded-full overflow-hidden border-2 border-white shadow-qq">
            <img src="https://picsum.photos/id/1012/100/100" alt="小明头像" class="w-full h-full object-cover">
          </button>
          <span class="absolute -top-1 -right-1 w-4 h-4 bg-qred rounded-full flex items-center justify-center text-white text-xs">3</span>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 pt-24 pb-16 flex flex-col lg:flex-row gap-6">
    <!-- 左侧边栏：个人资料 -->
    <aside class="lg:w-1/4 space-y-6">
      <!-- 个人资料卡 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <!-- 封面图 -->
        <div class="h-32 bg-gradient-to-r from-qblue to-blue-400 rounded-t-lg relative overflow-hidden">
          <img src="https://picsum.photos/id/1039/800/400" alt="封面图" class="w-full h-full object-cover opacity-90">
          <button class="absolute bottom-3 right-3 bg-white/80 text-qblue text-sm py-1 px-2 rounded qq-transition hover:bg-white">
            <i class="fa fa-camera mr-1"></i>更换封面
          </button>
        </div>
        
        <!-- 头像和基本信息 -->
        <div class="px-4 pb-4 -mt-12">
          <div class="w-24 h-24 rounded-full border-4 border-white overflow-hidden mx-auto mb-2">
            <img src="https://picsum.photos/id/1012/200/200" alt="小明头像" class="w-full h-full object-cover">
          </div>
          <div class="text-center">
            <h1 class="text-xl font-bold">小明</h1>
            <p class="text-qdarkgray text-sm mt-1">
              <i class="fa fa-map-marker mr-1"></i>上海市 · 浦东新区
            </p>
          </div>
          
          <!-- 资料统计 -->
          <div class="flex justify-around mt-4 pt-4 border-t border-gray-100">
            <div class="text-center">
              <p class="text-lg font-bold text-qblue">268</p>
              <p class="text-xs text-qdarkgray">动态</p>
            </div>
            <div class="text-center">
              <p class="text-lg font-bold text-qblue">156</p>
              <p class="text-xs text-qdarkgray">好友</p>
            </div>
            <div class="text-center">
              <p class="text-lg font-bold text-qblue">3289</p>
              <p class="text-xs text-qdarkgray">访问</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 个人资料详情 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <div class="px-4 py-3 border-b border-gray-100">
          <h2 class="font-bold text-gray-800 flex items-center">
            <i class="fa fa-user-circle text-qblue mr-2"></i>个人资料
          </h2>
        </div>
        <div class="p-4 space-y-3">
          <div class="flex">
            <span class="w-1/3 text-qdarkgray text-sm">昵称</span>
            <span class="w-2/3 text-sm">小明同学</span>
          </div>
          <div class="flex">
            <span class="w-1/3 text-qdarkgray text-sm">性别</span>
            <span class="w-2/3 text-sm"><i class="fa fa-mars text-blue-500 mr-1"></i>男</span>
          </div>
          <div class="flex">
            <span class="w-1/3 text-qdarkgray text-sm">年龄</span>
            <span class="w-2/3 text-sm">24岁</span>
          </div>
          <div class="flex">
            <span class="w-1/3 text-qdarkgray text-sm">生日</span>
            <span class="w-2/3 text-sm">1999年8月15日</span>
          </div>
          <div class="flex">
            <span class="w-1/3 text-qdarkgray text-sm">职业</span>
            <span class="w-2/3 text-sm">前端开发工程师</span>
          </div>
          <div class="flex">
            <span class="w-1/3 text-qdarkgray text-sm">签名</span>
            <span class="w-2/3 text-sm">热爱生活，热爱编程，每天进步一点点～</span>
          </div>
        </div>
      </div>
      
      <!-- 访问统计 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <div class="px-4 py-3 border-b border-gray-100">
          <h2 class="font-bold text-gray-800 flex items-center">
            <i class="fa fa-line-chart text-qblue mr-2"></i>访问统计
          </h2>
        </div>
        <div class="p-4">
          <canvas id="visitChart" height="180"></canvas>
        </div>
      </div>
    </aside>
    
    <!-- 中间内容区：动态发布和好友动态 -->
    <section class="lg:w-2/4 space-y-6">
      <!-- 发布动态 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <div class="p-4">
          <div class="flex space-x-3">
            <div class="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
              <img src="https://picsum.photos/id/1012/100/100" alt="小明头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <textarea placeholder="分享新鲜事..." class="w-full border border-gray-200 rounded-lg p-3 text-sm status-input focus:outline-none resize-none h-20"></textarea>
              <div class="flex justify-between items-center mt-3">
                <div class="flex space-x-4">
                  <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                    <i class="fa fa-image text-lg mr-1"></i>
                    <span class="text-sm">图片</span>
                  </button>
                  <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                    <i class="fa fa-video-camera text-lg mr-1"></i>
                    <span class="text-sm">视频</span>
                  </button>
                  <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                    <i class="fa fa-smile-o text-lg mr-1"></i>
                    <span class="text-sm">表情</span>
                  </button>
                </div>
                <button class="bg-qblue text-white px-4 py-1.5 rounded-lg text-sm font-medium qq-transition hover:bg-blue-600">
                  发表
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 动态筛选 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <div class="flex">
          <button class="flex-1 py-3 text-center text-qblue font-medium border-b-2 border-qblue">
            全部动态
          </button>
          <button class="flex-1 py-3 text-center text-gray-600 hover:text-qblue qq-transition">
            好友动态
          </button>
          <button class="flex-1 py-3 text-center text-gray-600 hover:text-qblue qq-transition">
            我的动态
          </button>
        </div>
      </div>
      
      <!-- 好友动态列表 -->
      <div class="space-y-6">
        <!-- 动态1：小明自己的动态 -->
        <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
          <div class="p-4">
            <!-- 动态作者信息 -->
            <div class="flex space-x-3">
              <div class="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                <img src="https://picsum.photos/id/1012/100/100" alt="小明头像" class="w-full h-full object-cover">
              </div>
              <div class="flex-1">
                <div class="flex justify-between items-center">
                  <h3 class="font-medium">小明</h3>
                  <span class="text-xs text-qdarkgray">今天 10:23</span>
                </div>
                <p class="text-sm mt-1">
                  今天完成了一个重要的项目，感觉特别有成就感！分享一下项目中的截图，感谢团队的支持～
                </p>
              </div>
            </div>
            
            <!-- 动态图片 -->
            <div class="mt-3 grid grid-cols-3 gap-2">
              <div class="aspect-square rounded overflow-hidden">
                <img src="https://picsum.photos/id/0/300/300" alt="项目截图1" class="w-full h-full object-cover qq-transition hover:scale-105">
              </div>
              <div class="aspect-square rounded overflow-hidden">
                <img src="https://picsum.photos/id/180/300/300" alt="项目截图2" class="w-full h-full object-cover qq-transition hover:scale-105">
              </div>
              <div class="aspect-square rounded overflow-hidden">
                <img src="https://picsum.photos/id/48/300/300" alt="项目截图3" class="w-full h-full object-cover qq-transition hover:scale-105">
              </div>
            </div>
            
            <!-- 动态互动 -->
            <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
              <button class="flex items-center text-qdarkgray hover:text-qred qq-transition">
                <i class="fa fa-thumbs-o-up mr-1"></i>
                <span class="text-sm">点赞(28)</span>
              </button>
              <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                <i class="fa fa-comment-o mr-1"></i>
                <span class="text-sm">评论(12)</span>
              </button>
              <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                <i class="fa fa-share mr-1"></i>
                <span class="text-sm">分享</span>
              </button>
            </div>
            
            <!-- 评论区 -->
            <div class="mt-3 space-y-3">
              <!-- 评论1 -->
              <div class="flex space-x-2 bg-qlightblue/50 p-2 rounded-lg">
                <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
                  <img src="https://picsum.photos/id/1027/100/100" alt="好友头像" class="w-full h-full object-cover">
                </div>
                <div class="flex-1">
                  <div class="flex items-center">
                    <span class="text-xs font-medium">小红</span>
                    <span class="text-xs text-gray-600 ml-2">太棒啦！恭喜恭喜～</span>
                  </div>
                  <div class="text-xs text-qdarkgray mt-1 flex items-center space-x-3">
                    <span>今天 10:35</span>
                    <button class="hover:text-qred">点赞(3)</button>
                    <button class="hover:text-qblue">回复</button>
                  </div>
                </div>
              </div>
              
              <!-- 评论输入框 -->
              <div class="flex space-x-2">
                <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
                  <img src="https://picsum.photos/id/1012/100/100" alt="小明头像" class="w-full h-full object-cover">
                </div>
                <div class="flex-1">
                  <input type="text" placeholder="发表评论..." class="w-full border border-gray-200 rounded-full p-2 text-sm focus:outline-none focus:border-qblue">
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 动态2：好友动态 -->
        <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
          <div class="p-4">
            <div class="flex space-x-3">
              <div class="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                <img src="https://picsum.photos/id/1005/100/100" alt="好友头像" class="w-full h-full object-cover">
              </div>
              <div class="flex-1">
                <div class="flex justify-between items-center">
                  <h3 class="font-medium">小李</h3>
                  <span class="text-xs text-qdarkgray">昨天 18:45</span>
                </div>
                <p class="text-sm mt-1">
                  周末和小明一起去爬山，风景真不错！下次还要一起～ #户外 #友谊长存
                </p>
              </div>
            </div>
            
            <div class="mt-3 grid grid-cols-2 gap-2">
              <div class="aspect-square rounded overflow-hidden">
                <img src="https://picsum.photos/id/1036/300/300" alt="爬山照片1" class="w-full h-full object-cover qq-transition hover:scale-105">
              </div>
              <div class="aspect-square rounded overflow-hidden">
                <img src="https://picsum.photos/id/1038/300/300" alt="爬山照片2" class="w-full h-full object-cover qq-transition hover:scale-105">
              </div>
            </div>
            
            <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
              <button class="flex items-center text-qdarkgray hover:text-qred qq-transition">
                <i class="fa fa-thumbs-o-up mr-1"></i>
                <span class="text-sm">点赞(16)</span>
              </button>
              <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                <i class="fa fa-comment-o mr-1"></i>
                <span class="text-sm">评论(5)</span>
              </button>
              <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                <i class="fa fa-share mr-1"></i>
                <span class="text-sm">分享</span>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 动态3：说说 -->
        <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
          <div class="p-4">
            <div class="flex space-x-3">
              <div class="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                <img src="https://picsum.photos/id/1012/100/100" alt="小明头像" class="w-full h-full object-cover">
              </div>
              <div class="flex-1">
                <div class="flex justify-between items-center">
                  <h3 class="font-medium">小明</h3>
                  <span class="text-xs text-qdarkgray">3天前</span>
                </div>
                <p class="text-sm mt-1">
                  推荐一本最近在看的书《JavaScript高级程序设计》，内容非常扎实，适合前端开发者深入学习～ 👍
                </p>
              </div>
            </div>
            
            <div class="mt-3 pt-3 border-t border-gray-100 flex justify-between items-center">
              <button class="flex items-center text-qdarkgray hover:text-qred qq-transition">
                <i class="fa fa-thumbs-o-up mr-1"></i>
                <span class="text-sm">点赞(32)</span>
              </button>
              <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                <i class="fa fa-comment-o mr-1"></i>
                <span class="text-sm">评论(8)</span>
              </button>
              <button class="flex items-center text-qdarkgray hover:text-qblue qq-transition">
                <i class="fa fa-share mr-1"></i>
                <span class="text-sm">分享</span>
              </button>
            </div>
          </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center py-3">
          <button class="bg-white border border-gray-300 rounded-lg px-6 py-2 text-sm text-gray-700 hover:bg-gray-50 qq-transition">
            <i class="fa fa-refresh mr-1"></i>加载更多动态
          </button>
        </div>
      </div>
    </section>
    
    <!-- 右侧边栏：相册、留言板、好友 -->
    <aside class="lg:w-1/4 space-y-6">
      <!-- 相册预览 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center">
          <h2 class="font-bold text-gray-800 flex items-center">
            <i class="fa fa-picture-o text-qblue mr-2"></i>我的相册
          </h2>
          <a href="#" class="text-sm text-qblue hover:underline">查看全部</a>
        </div>
        <div class="p-3">
          <div class="grid grid-cols-3 gap-1">
            <div class="aspect-square rounded overflow-hidden">
              <img src="https://picsum.photos/id/10/100/100" alt="相册照片1" class="w-full h-full object-cover qq-transition hover:scale-105">
            </div>
            <div class="aspect-square rounded overflow-hidden">
              <img src="https://picsum.photos/id/20/100/100" alt="相册照片2" class="w-full h-full object-cover qq-transition hover:scale-105">
            </div>
            <div class="aspect-square rounded overflow-hidden">
              <img src="https://picsum.photos/id/30/100/100" alt="相册照片3" class="w-full h-full object-cover qq-transition hover:scale-105">
            </div>
            <div class="aspect-square rounded overflow-hidden">
              <img src="https://picsum.photos/id/40/100/100" alt="相册照片4" class="w-full h-full object-cover qq-transition hover:scale-105">
            </div>
            <div class="aspect-square rounded overflow-hidden">
              <img src="https://picsum.photos/id/50/100/100" alt="相册照片5" class="w-full h-full object-cover qq-transition hover:scale-105">
            </div>
            <div class="aspect-square rounded overflow-hidden">
              <img src="https://picsum.photos/id/60/100/100" alt="相册照片6" class="w-full h-full object-cover qq-transition hover:scale-105">
            </div>
          </div>
          <div class="mt-2 text-center text-sm text-qdarkgray">
            共68张照片
          </div>
        </div>
      </div>
      
      <!-- 留言板 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center">
          <h2 class="font-bold text-gray-800 flex items-center">
            <i class="fa fa-comments text-qblue mr-2"></i>留言板
          </h2>
          <a href="#" class="text-sm text-qblue hover:underline">更多留言</a>
        </div>
        <div class="p-4 space-y-4 max-h-80 overflow-y-auto">
          <!-- 留言1 -->
          <div class="flex space-x-2">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
              <img src="https://picsum.photos/id/1000/100/100" alt="留言者头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1 bg-qlightblue/30 p-2 rounded-lg">
              <div class="flex justify-between items-center">
                <span class="text-xs font-medium">小张</span>
                <span class="text-xs text-qdarkgray">1周前</span>
              </div>
              <p class="text-xs mt-1">小明，最近怎么样？好久没联系了～</p>
            </div>
          </div>
          
          <!-- 留言2 -->
          <div class="flex space-x-2">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
              <img src="https://picsum.photos/id/1001/100/100" alt="留言者头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1 bg-qlightblue/30 p-2 rounded-lg">
              <div class="flex justify-between items-center">
                <span class="text-xs font-medium">小王</span>
                <span class="text-xs text-qdarkgray">2周前</span>
              </div>
              <p class="text-xs mt-1">项目做得真棒！向你学习～</p>
            </div>
          </div>
          
          <!-- 留言3 -->
          <div class="flex space-x-2">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
              <img src="https://picsum.photos/id/1002/100/100" alt="留言者头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1 bg-qlightblue/30 p-2 rounded-lg">
              <div class="flex justify-between items-center">
                <span class="text-xs font-medium">小赵</span>
                <span class="text-xs text-qdarkgray">1个月前</span>
              </div>
              <p class="text-xs mt-1">下次聚会记得叫上我呀！</p>
            </div>
          </div>
        </div>
        
        <!-- 发表留言 -->
        <div class="px-4 pb-4">
          <div class="flex space-x-2">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
              <img src="https://picsum.photos/id/1012/100/100" alt="小明头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <input type="text" placeholder="给我留言..." class="w-full border border-gray-200 rounded-full p-2 text-sm focus:outline-none focus:border-qblue">
            </div>
          </div>
        </div>
      </div>
      
      <!-- 好友列表 -->
      <div class="bg-white rounded-lg qq-border shadow-qq qq-transition hover:shadow-qq-hover">
        <div class="px-4 py-3 border-b border-gray-100 flex justify-between items-center">
          <h2 class="font-bold text-gray-800 flex items-center">
            <i class="fa fa-users text-qblue mr-2"></i>好友动态
          </h2>
          <a href="#" class="text-sm text-qblue hover:underline">查看全部</a>
        </div>
        <div class="p-3 space-y-3 max-h-72 overflow-y-auto">
          <!-- 好友1 -->
          <div class="flex items-center space-x-3">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 relative">
              <img src="https://picsum.photos/id/1025/100/100" alt="好友头像" class="w-full h-full object-cover">
              <span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-white"></span>
            </div>
            <div class="flex-1">
              <div class="flex justify-between">
                <span class="text-sm font-medium">小陈</span>
                <span class="text-xs text-qdarkgray">在线</span>
              </div>
              <p class="text-xs text-qdarkgray truncate">分享了一首好听的歌</p>
            </div>
          </div>
          
          <!-- 好友2 -->
          <div class="flex items-center space-x-3">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
              <img src="https://picsum.photos/id/1074/100/100" alt="好友头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <div class="flex justify-between">
                <span class="text-sm font-medium">小刘</span>
                <span class="text-xs text-qdarkgray">1小时前</span>
              </div>
              <p class="text-xs text-qdarkgray truncate">发布了新的相册：旅行日记</p>
            </div>
          </div>
          
          <!-- 好友3 -->
          <div class="flex items-center space-x-3">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 relative">
              <img src="https://picsum.photos/id/1062/100/100" alt="好友头像" class="w-full h-full object-cover">
              <span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-white"></span>
            </div>
            <div class="flex-1">
              <div class="flex justify-between">
                <span class="text-sm font-medium">小周</span>
                <span class="text-xs text-qdarkgray">在线</span>
              </div>
              <p class="text-xs text-qdarkgray truncate">今天天气真好，适合出游～</p>
            </div>
          </div>
          
          <!-- 好友4 -->
          <div class="flex items-center space-x-3">
            <div class="w-8 h-8 rounded-full overflow-hidden flex-shrink-0">
              <img src="https://picsum.photos/id/1083/100/100" alt="好友头像" class="w-full h-full object-cover">
            </div>
            <div class="flex-1">
              <div class="flex justify-between">
                <span class="text-sm font-medium">小吴</span>
                <span class="text-xs text-qdarkgray">5小时前</span>
              </div>
              <p class="text-xs text-qdarkgray truncate">推荐一个好用的工具，大家可以试试</p>
            </div>
          </div>
        </div>
      </div>
    </aside>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4 text-center text-qdarkgray text-sm">
      <div class="flex justify-center space-x-6 mb-3">
        <a href="#" class="hover:text-qblue qq-transition">关于我们</a>
        <a href="#" class="hover:text-qblue qq-transition">服务条款</a>
        <a href="#" class="hover:text-qblue qq-transition">隐私政策</a>
        <a href="#" class="hover:text-qblue qq-transition">客服中心</a>
      </div>
      <p>Copyright © 1998 - 2025 Tencent. All Rights Reserved.</p>
      <p class="mt-1">腾讯公司 版权所有</p>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
      const nav = document.querySelector('.nav-scroll');
      if (window.scrollY > 10) {
        nav.classList.add('shadow-md');
        nav.classList.add('bg-white/95');
        nav.classList.remove('bg-white');
      } else {
        nav.classList.remove('shadow-md');
        nav.classList.remove('bg-white/95');
        nav.classList.add('bg-white');
      }
    });
    
    // 访问统计图表
    document.addEventListener('DOMContentLoaded', function() {
      const ctx = document.getElementById('visitChart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          datasets: [{
            label: '访问量',
            data: [32, 45, 28, 56, 42, 78, 65],
            borderColor: '#2D7DD2',
            backgroundColor: 'rgba(45, 125, 210, 0.1)',
            tension: 0.4,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                display: true,
                color: 'rgba(0, 0, 0, 0.05)'
              }
            },
            x: {
              grid: {
                display: false
              }
            }
          }
        }
      });
    });
    
    // 动态图片预览效果
    const dynamicImages = document.querySelectorAll('.aspect-square img');
    dynamicImages.forEach(img => {
      img.addEventListener('click', function() {
        // 这里可以添加图片预览功能
        alert('图片预览功能（实际项目中可实现大图查看）');
      });
    });
  </script>
</body>
</html>
